<template>
    <el-form :model="form" label-width="auto" style="max-width: 600px" :inline="true">
        <el-form-item>
            <el-button type="primary" @click="toAdd">添加</el-button>
        </el-form-item>
    </el-form>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="constanttypecode" label="常数类别编码" width="180" />
            <el-table-column prop="constanttypename" label="常数类别名称" width="180" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="toEdit(scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="toDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 添加表单 dialogFormVisible 表示是否显示，  boolean   -->
    <el-dialog v-model="editDialogFormVisible" title="添加常数类别" width="500">
        <el-form :model="editForm" label-width="auto">
            <el-form-item label="常数类别编码">
                <el-input v-model="editForm.constanttypecode" />
            </el-form-item>
            <el-form-item label="常数类别名称">
                <el-input v-model="editForm.constanttypename" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import service from '@/utils/request';

// 搜索表单数据
let form = ref({});
// 编辑表单数据
let editForm = ref({
    constanttypecode: '',
    constanttypename: ''
});
// 控制编辑对话框的显示与隐藏
let editDialogFormVisible = ref(false);
// 表格数据
let tableData = ref([]);

// 跳转到添加页面
function toAdd() {
    // 清空编辑表单数据
    editForm.value = {
        constanttypecode: '',
        constanttypename: ''
    };
    editDialogFormVisible.value = true;
}

// 跳转到编辑页面
function toEdit(row) {
    // 将当前行数据复制到编辑表单
    editForm.value = { ...row };
    editDialogFormVisible.value = true;
}

// 删除操作
function toDelete(id) {
    // 确认删除提示
    if (confirm('确定要删除该记录吗？')) {
        service.delete(`/constanttype/delete/${id}`).then((res) => {
            if (res.data) {
                ElNotification({
                    title: '提示',
                    message: '删除成功！',
                    type: 'success'
                });
                listData();
            } else {
                ElNotification({
                    title: '提示',
                    message: '删除失败！',
                    type: 'error'
                });
            }
        }).catch(() => {
            ElNotification({
                title: '提示',
                message: '删除失败，请稍后重试！',
                type: 'error'
            });
        });
    }
}

// 保存数据
function save() {
    if (editForm.value.id) {
        // 编辑操作
        service.put('/constanttype/update', editForm.value).then((res) => {
            editDialogFormVisible.value = false;
            if (res.data) {
                ElNotification({
                    title: '提示',
                    message: '保存成功！',
                    type: 'success'
                });
                listData();
            } else {
                ElNotification({
                    title: '提示',
                    message: '保存失败！',
                    type: 'error'
                });
            }
        }).catch(() => {
            ElNotification({
                title: '提示',
                message: '保存失败，请稍后重试！',
                type: 'error'
            });
        });
    } else {
        // 添加操作
        service.post('/constanttype/add', editForm.value).then((res) => {
            editDialogFormVisible.value = false;
            if (res.data) {
                ElNotification({
                    title: '提示',
                    message: '保存成功！',
                    type: 'success'
                });
                listData();
            } else {
                ElNotification({
                    title: '提示',
                    message: '保存失败！',
                    type: 'error'
                });
            }
        }).catch(() => {
            ElNotification({
                title: '提示',
                message: '保存失败，请稍后重试！',
                type: 'error'
            });
        });
    }
}

// 获取列表数据
function listData() {
    service.get("/constanttype/list").then((res) => {
        tableData.value = res.data;
    }).catch(() => {
        ElNotification({
            title: '提示',
            message: '获取列表数据失败，请稍后重试！',
            type: 'error'
        });
    });
}

// 组件挂载后加载列表数据
onMounted(() => {
    listData();
});
</script>